<!--
 * @Author: 李环玉 834654733@qq.com
 * @Date: 2023-12-16 02:46:45
 * @LastEditors: 李环玉 834654733@qq.com
 * @LastEditTime: 2023-12-17 02:16:55
 * @FilePath: \nuxt-app\components\MsgCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="card-title">
    <div class="card-title_title">
      <span>
        <span class="iconfont icon-liuyanban-xian"></span>
        最新留言
      </span>
      <i></i>
    </div>
    <ul class="list">
      <li v-for="(item,index) in boards" :key="index">
        <div class="list_user">
          <img :src="item.avatar">
          <div class="list_user--username">
            <p>{{ item.author }}
              <!-- <span>
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.system"></use>
                </svg>{{ item.system.split('-')[1] }}
              </span> -->
              &nbsp;&nbsp;
              <span>
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="item.browser"></use>
                </svg>&nbsp;&nbsp;{{ item.browser.split('-')[1] }}
              </span>
              </p>
              <p>
              <span class="iconfont icon-time"></span>
              {{ item.createTime }}
              </p>
          </div>
        </div>
        <div class="list_user--content">
          <p>{{ item.text }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { getLeaveMsg } from '../service/api/Blogger'
const boards = ref()
const getLeavemsgList = async ()=> {
  await nextTick()
  let pages = {
    pageNo:1,
    pageSize:5
  }
  try{
    const res:any = await getLeaveMsg(pages)
    const data = res.data._value.data
    boards.value = data
  }catch(err) {
    console.log(err)
  }
}
onMounted(()=>{
  getLeavemsgList()
})
</script>
<style scoped lang="scss">
.list{
    padding: 0 10px;
    background: #fff;
    li{
      padding: 10px 0;
    }
    &_user{
      display: flex;
      align-items: center;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }
      &--username{
        font-size: 14px;
        p{
          line-height: 24px;
        }
      }
      &--content{
        font-size: 14px;
        margin-top: 20px;
        padding-left: 20px;
        p{
          line-height: 20px;
        }
      }
    }
  }
</style>